Advanced CSS3 and HTML5

Introduction

Welcome to Advanced CSS3 and HTML5!

Click the audio button below to listen to a message from David Karlins.

This will be a different kind of Web design class. Rather than starting from this or that technique (such as HTML5, CSS3, JavaScript, or PHP), I've structured this course around designing inviting, accessible, effective websites.

Let me share a little bit about my approach to Web design: I believe that if you have something important to present on the Web, you should do that with a website you build yourself. Facebook is fine for social networking and keeping track of birthdays. YouTube is an easy way to share videos. LinkedIn is an effective tool for business networking. But you must build a serious and effective Web presence around a website. And preset page-building tools and templates don't provide sufficient flexibility for a one-of-a-kind site that focuses on your message and mission.

It can be difficult for a Web designer to duplicate the kinds of features that are on a social network site or a template site. I'm talking about feedback forms, embedded video, animated photo galleries, and content that's optimized for search engines. But there are tools and techniques you can use to integrate all these features into your site. And in this course, I'll show you how to use the most important and effective of those tools.

Don't get me wrong. You'll develop your HTML5 and CSS3 skills as we do that. We'll use many of the most dynamic and exciting (and yes, fun) tools in HTML5 and CSS3. In fact, Lesson 2 will be a fast-paced refresher, review, and enhancement of your HTML5 and CSS3 skills.

Before we get to that, let me tell you a bit about myself. I've been designing websites for 15 years. My clients have ranged from Hewlett-Packard to the Himalayan Fair. Much of my recent work is for publications, performers, performance venues, artists, and craft sites.

These days, I primarily function as a problem solver and consultant for a wide range of Web design projects. My articles on Web design appear in Macworld and Businessweek and online at adobepress.com and peachpit.com. I've taught in corporate training environments and conducted seminars at conventions. Mostly, I teach in colleges and art schools—most recently in Berkeley, San Francisco, and New York City.

One of the things I appreciate very much is the emergence of a grassroots scene around my books and articles. For example, there are more than 200 videos based on my books on YouTube. I'll alert you to some of these resources over the course of this program.

But enough about me! Let's talk about what you'll learn today.

I'll give you a little preview of this class—I'll describe some of the skills you'll learn, and I'll explain how those skills complement each other. In the course of doing that, we'll explore some of the hallmarks of advanced websites, such as attractive color schemes, custom fonts, and forms that gather valuable information. And since a steadily increasing number of users access sites from smartphones and tablets, we'll talk about designing for mobile users.

Please move ahead to Chapter 2, and we'll talk about the skills you'll develop while taking this course.

What Makes This Course Advanced?

I want to devote this chapter to explaining how this course differs from other Web-development courses you may have taken. Since you're spending time, effort, and money on this course, you deserve to know what we'll cover and why it's worth learning.

Working With a Remote Hosting Server

I've been teaching Web design for 15 years, in live classes and online. And I'm convinced that any advanced Web design course should include, from the beginning, building a site on your local computer and uploading and testing it in the "real world" on a remote website. We'll do that in this class.

In the next lesson, you'll use a remote Web host to upload site content. What if you don't have access to a remote server? No problem. I've selected a commercial hosting company that provides a relatively full-service hosting option for free. And I'll show you how to sign up for hosting and manage server connections to a remote site.

So get ready to tweet your friends and let them know you'll soon have a site online. (Or maybe wait a few lessons until that site gets a bit more impressive, and then send out that tweet.)

While you're configuring a connection to our remote hosting server, I'll walk you through the process of shopping for and evaluating website hosting services. We'll explore what features you need for different kinds of sites and how to contract for what you need. Let me define a couple of terms you'll need to understand to manage advanced Web design.

• You probably already know that a script is a list of commands the computer can carry out without any additional help from you. Scripts are part of programming languages like JavaScript that help you design interactive sites. (You may also have heard of Java, but that's a different programming language that's only distantly related to JavaScript.)

• Client-side scripts (usually using JavaScript) run in a browser. In fact, browser and client are basically the same thing. You don't need to host your website at a server to test JavaScript.
• Server-side scripts, like those that manage data submitted in a form, run on special software (like Apache servers). Server-side scripting languages include PHP, Perl, ASP, JSP, and Ruby.

Using Advanced HTML5 and CSS3

I'm assuming you have the basic HTML5 and CSS3 skills covered in Introduction to CSS3 and HTML5 and Intermediate CSS3 and HTML5. Lesson 2 of this class is an intense, compressed review and refresher on basic and intermediate HTML and CSS. You'll reinforce and build on those skills. And if you're an über-fast learner who has picked up HTML5 and CSS3 skills on the fly, that compressed review will let you quickly fill in gaps in your knowledge. Here are some additional, advanced HTML5 and CSS3 techniques we'll cover in this course.

• Presenting HTML5 native video without plug-ins (like Windows Media Player, QuickTime, or Flash Player).
• Adding inviting prompts and validation to forms. (Validation means that the user can't submit the form unless he or she has filled in required information in the form.)
• Using HTML5 structure tags to optimize page content for search engines.
• Relying on ID div tags for page design and navigation. (Remember, a div tag defines a division or section of an HTML document. It's the building block of modern Web design. An ID div tag applies style properties to a div tag, like height, width, and background color.)
• Combining CSS3 effects like semitransparency, rounded-corner boxes, and drop shadows with div-tag-based page designs.
• Creating animated CSS3 transitions to expand, shrink, rotate, skew, and move elements.

Where there's overlap in these lists with features in beginning and intermediate classes, we'll mix and match techniques and explore advanced applications.

Going Beyond HTML5 and CSS3

This course ranges well beyond the limits of HTML5 and CSS3. Part of that involves what I like to call "generating scripts without scripting." Advanced Web design requires implementing JavaScript for animation and interactivity and using server-side scripting to manage form data. I won't try to compress a server-side scripting course into this class, but we will explore shortcuts for generating JavaScript and form-managing scripts.

You'll find out about online (free!) tools for generating animated image galleries and server-side scripts for collecting form data. Along the way, you'll learn to find and use all kinds of free resources for generating complex Web designs.

Much of our journey will involve solving real-world design challenges. You'll build your HTML5 and CSS design muscles along the way.

Advanced Web design combines the creativity, uniqueness, and customization of a site you build yourself with tools that let you do more with less code.

Qualities of Advanced Websites

• Creativity
• Uniqueness
• Customization

Let's say you want to manage form data, present image galleries, and embed accessible video. If you were to try to do all that from scratch, you'd need to learn to program in JavaScript and in at least one server-side scripting language. But you don't have to do that. Many free online tools generate the content you need. Much of my work involves experimenting with these tools, and I'll turn you on to the best of them in this course.

Let me make a controversial assertion: It's actually easier to put together your own advanced website, drawing on HTML5, CSS3, and tools available online, than it is to try to customize a template-based site. I say that based on focused research with clients who have tried customizing sites.

In this course, we'll use every shortcut, loophole, and easy option to generate advanced website content . . . while retaining complete control over that content.

Testing and Modern Browsers

Should advanced Web designers accommodate older browsers, like Internet Explorer 6 through 8? In short: We can't let them constrain us. We can't be limited by what those older browsers support.

This isn't a judgment of people who use those versions of IE. If anything, it's a judgment of Microsoft's upgrade policies, which don't allow customers with older versions of Windows to update to the current version of IE.

From time to time, I'll mention resources to adapt modern websites to run in IE 6-8, particularly in the Supplementary Material. But it's too great a drain on development energy and resources to include hacks and work-arounds that enable IE 6-8 users to access all the features of advanced Web design.

If you have IE8 (or older) as your only installed browser, please download and install the current version of IE or Chrome, Firefox, Safari, or Opera.

Now that we've talked a little about what makes this course advanced, let's talk about what makes a website advanced. Meet me in Chapter 3 for discussion of color schemes, native video, and much more.

What Makes a Website Advanced?

Have you ever visited a website and thought, "I don't know what this site's about, but it looks really polished"? What about visiting a site and thinking, "Something about this looks shoddy"? In this chapter, we'll go over some of the subtle and not-so-subtle factors that make a website attractive and functional.

Understanding the Value of Color Schemes

One of the most underrated elements of advanced Web design—at least at the level of do-it-yourselfers and freelancers—is a carefully thought-out and applied color scheme. Color schemes are essential to establishing your "brand," as they say. And color schemes are central to providing coherence, a look and feel that runs through your entire site.

Target and Old Navy have well-established brand identification, and they make sure that infuses their websites. Target (www.target.com/) uses a red-based color scheme.

Target's color scheme

Old Navy (oldnavy.com) uses the yellow and blue color scheme associated with that brand name.

Old Navy's color scheme

What about small businesses, community organizations, professional service providers, and others? Color schemes can be a powerful tool in making their sites attractive and establishing a branding experience on the spot, even for visitors who haven't been exposed to them before.

Take a look at the screenshot (below) of the pet store Pets on Lex. A color scheme that runs through the entire site creates a vibe and identity.

Pets on Lex color scheme

And the Keshet Dance Company (www.keshetdance.org) defines its identity online with a bright palette of colors. Even though the pet store and the dance company use similar colors, the pet store's use of a repeating pattern and both sites' use of fonts give each site a different feel and "personality."

Keshet Dance Company color scheme

There's an art to defining an effective color scheme. And there are rules that make the difference between an effective set of colors, a dull presence, and a distracting cacophony of color. For example, effective color schemes are constrained to just five colors (neutral shades like black and white don't count). We'll return to the art and science of effective color schemes later in the course. But for now, as you browse the Web, think about how the color schemes of different sites affect the appeal of those sites.

Color and Mobile Devices

Color is a big part of creating a mobile-friendly version of a site. Mobile devices require high-contrast color schemes to compensate for the extreme lighting conditions users encounter, from bright sunlight to pitch dark.

CSS3 gradients have opened up a range of possibilities for gradient blends as backgrounds for pages and elements. To designers, a gradient is when colors blend seamlessly into one another instead of appearing in stripes. For instance, your page background might go from red on the right side of the page to blue on the left side.

Until recently, the only option for a gradient background was to design a gradient image file (a PNG or JPEG) and repeat it in the page or element background. But thanks to CSS3, you can generate those kinds of gradient backgrounds without an image!

You see this technique all the time in mobile sites, as with the image below. (Ignore the words—just look at the colors.) This approach to CSS3 gradients is migrating to Web design for desktop and laptop users as well.

CSS3 gradients

Along with exploring CSS3 gradients, we'll walk through how to implement basic CSS3 effects and transforms to create rotated or twisted content, box shadows, semitransparent elements, and more. And we'll animate those effects by combining them with div tags.

Defining a Distinctive Look and Feel With Custom Fonts

Custom fonts are one of the most powerful ways to establish a one-of-a-kind look and feel for a website.

Until recently, designers had to rely on the font sets installed on a user's computer. You could format your Web pages with any type font you wished, but only users who had your font installed would see the text the way you styled it.

The first generation of Web fonts were, in my opinion, either too much hassle or too expensive. They required you to download and install a font file as part of your website, and then they required users to download that file to view your site properly. That's too many hurdles!

But custom fonts can be very effective. Check out keithrichards.com. The Web designer used fonts to make a statement that's as unusual as Keith is.

Making effective use of custom fonts

If you play guitar for the Rolling Stones, you can afford to buy sets of custom fonts or even have someone create them for you. But Google Fonts has made custom fonts accessible to any designer. And because your visitors don't need to download fonts from your site, the pages load quickly enough to perform well in mobile devices. We'll go into detail about custom fonts in a later lesson.

Providing Accessible Video With HTML5

One of the most noteworthy and controversial aspects of HTML is native video. The concept is simple: Video plays in the user's browser and doesn't require a downloaded plug-in like Flash Player, Windows Media Player, or QuickTime.

The controversy erupted when the late Steve Jobs decreed that Apple wouldn't support the Flash Player plug-in in the iPod or iPhone. That cut the legs out from under Flash and created a somewhat anarchic situation, with different browsers supporting different native video (and audio) formats. We'll walk through how to prepare video that works in any situation and integrate it into advanced Web design.

A still image that depicts watching native video in Safari with no plug-in

Harvesting Data With Forms

Forms are one of the most underrated elements of a website. They collect information, sell products, build mailing lists, make content more accessible, and provide feedback that can help you improve your site. Case in point: the humble feedback form that the Ah Cacao café folks use at their site.

Collecting valuable input from visitors

Ah Cacao café gets free advice from their guests with this form. But more than that, after a visitor has accepted the invitation to share feedback, that person is encouraged to add his or her email address to the café's mailing list. Just about any organization values an up-to-date list of its customers, donors, or supporters—and this list costs nothing to gather.

Forms have many valuable uses. We'll walk through how to build search boxes and sign-up forms. And as we go, we'll integrate valuable new properties in HTML5 to validate form input—that is, to test the input before the user submits the form. Validation lets you make sure required fields are filled out. It also lets you see if the content a user types into an email address field really looks like an email address.

HTML5 provides placeholder text that makes forms more inviting and less cluttered. And HTML5 validation doesn't require any server-side scripting.

Validating form data and displaying a user prompt in HTML5

I'll introduce you to some free online tools for managing the information you collect in a form.

Using JavaScript for Slide Shows

One of the most effective elements of advanced Web design is an inviting, accessible slide show of image galleries.

You have three basic options for generating animated, interactive image galleries:

• HTML-based slide shows: These are simple, and they work everywhere. They're one of the skills you'd learn in an introductory HTML class. But they're not necessarily dynamic, interactive, or animated enough for many situations.
• Flash-based slide shows: These are interactive and animated, but you can't rely on the Flash plug-in anymore in advanced Web design.
• JavaScript tools for presenting sets of photos: We'll look at my favorite free source for generating these elements. I'll prepare you to evaluate a wide range of options for presenting sets of photos.

Improving Search Engine Optimization With HTML5

People need to be able to find your website! Search engine optimization (SEO for short) is a science and an art, and we won't cover every dimension of it. But as search engines become more sophisticated, there's every indication that using HTML5's new structure elements will be increasingly important in driving people to your site. The biggest single factor in getting search engines to list your site is the content at your site. If you structure your content in HTML5 tags that identify content as an article, a date for an event, or a caption, the accuracy and prevalence of your listings are likely to improve.

One of the most significant changes in the online world recent years is the migration to mobile devices. In the next chapter, we'll discuss how smartphones and tablets are changing Web design.

How Do Mobile Users Affect Advanced Web Design?

Just watching people walk down the street will show you that the mobile audience is growing. And studies show that mobile users buy more per person than folks sitting in front of a desktop or laptop do. In 2012, the CEO of home décor company Fab.com noted that while 30% of visits to Fab.com were from mobile devices (a pretty significant stat in its own right), mobile visitors were twice as likely to make a purchase compared with those visiting on desktop computers. I've found a growing list of similar assertions from online services and retailers.

Many Web professionals think that sites with vast unlimited resources (the Disneys, the Apples, and the Orbitzes of the world) are the only ones who can create a really inviting mobile-friendly site. That's a misconception. By the end of this course, you'll know how to build a truly mobile-friendly version of your site, detect visitors using mobile devices, and divert them to an app-like mobile experience.

A Brief History of Mobile Design Options

There are several approaches to creating mobile content. Let me review them and put them in context.

Option one is to hope mobile users are happy with a site designed for a full-sized viewport (browsing window). Based on what I've just argued, I think we can pass on that option.

Or you could rely on fluid design—resizing elements for different viewports without really restructuring page design. Fluid design made sense when viewports ranged from big-screen desktops to smaller-screen laptops, but the rapidly expanding mobile audience has created a different set of challenges. Fluid design is appropriate for, and a sign of, a beginner-level website.

Another option is responsive design. This design changes depending on the user's viewport size. Full-screen users see one page layout, tablet users another, and mobile users yet another. Responsive design is a better choice than the others we've discussed, but it doesn't provide an advanced level of mobile interactivity and animation.

The best option, which we'll focus on in this class, is to build a jQuery Mobile site that looks and feels like an app. jQuery makes it easier to use JavaScript on your website. It's a library of shortcuts, so instead of writing many lines of code, you can accomplish the same task by cutting and pasting one line of code. You don't need to know how to write JavaScript (or any other code) to implement jQuery Mobile. Nor do you need to know anything about jQuery!

Modern users demand a more radical approach to mobile sites than is possible with fluid design or responsive design. Why? Here are some key reasons:

• Pages designed with elements that are difficult to work with or click on without a mouse are a turnoff for mobile users. jQuery Mobile supports the navigation techniques that those devices use.
• Forms designed for full-sized viewports are uninviting or inaccessible on mobile devices. But jQuery mobile forms are inviting and accessible, even to those of us with big fingers and less-than-optimal coordination.
• Everybody wants pages to load faster. But despite the competing, confusing, and exaggerated claims of 3G and 4G networks, mobile devices open pages more slowly than Wi-Fi or cable connections do. jQuery Mobile pages automatically store content. Once that content has loaded, visitors can read it on the subway or in an airplane (without Wi-Fi).
• Mobile users expect a fun, animated, interactive, dynamic experience. They get that with the app-like experience of a jQuery Mobile page.

To be clear: jQuery Mobile is for creating separate content for mobile users. It isn't intended to be a design tool for full-screen sites.

Building Pages With jQuery Mobile

jQuery Mobile provides features that solve the challenges that people face when they're designing for mobile devices.

Building sites in jQuery Mobile requires expanding your HTML5 skill set, but that time is well-spent. Creating expert-level jQuery Mobile sites for large institutions requires more in-depth exploration than we'll have time for. (If you're interested, you can look into my course Creating jQuery Mobile Websites With Dreamweaver.) But you will build a basic jQuery Mobile version of your site that looks and feels like an app in a mobile device.

Mobile-friendly form fields for visitor input

There's a place for fluid layouts and responsive design in creating mobile-friendly sites. The skills you may have picked up in beginning or intermediate HTML classes can help you at any level of expertise. But in this class, you'll fold your fluid layout and responsive design skills into jQuery Mobile pages for a much more effective mobile component of your site.

It's time to wrap up this lesson! Please join me in Chapter 5 for a summary.

Summary

We just surveyed a wide range of tools and techniques for advanced Web design. I hope your imagination is fired up, your creative juices are flowing, and you're as impatient as I am to get started exploring these options!

Try this activity to see how much you remember from the lesson. Don't worry—I won't keep track of your score.

While this course covers many areas, there's a coherence here. We're building websites that are dynamic, not static and boring. We're also building sites that are interactive—sites that have motion and that react to visitor input, whether in a form or by scrolling over a page element.

No technique or tool can make a website inviting. But a conceptual and technical understanding of advanced Web design techniques opens the door to truly creative website design.

The instant Web presence provided by Facebook or other content management systems, templates, or site generators will probably always have a role in creating websites. But my surveys of Web design trends and my experience with students and clients tell me that there's nothing like a custom-designed website to have a strong impact on visitors. I am firmly convinced that as people become more sophisticated in how they experience the Web, they'll be increasingly attuned to the difference between a creatively built website and a cookie-cutter, template-based site.

Talk About It

Please stop by the Lesson 1 Discussion Area now. You can introduce yourself, talk about your experiences with Web design, and say what you hope to learn in this course. (You don't need to use your full name—first names or nicknames are fine in the Discussion Area. And for safety reasons, please don't reveal your email address, street address, or phone number.)

I strongly encourage you to post insights, issues, problems, opinions, objections, and discoveries in the Discussion Area for each lesson. But I also want to encourage you to post tangential thoughts and issues that relate to our overall theme: advanced Web design. The more you interact with me and with your classmates, the more you'll get out of this course!